<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            display: block;
        }
        .container{
            width: 1200px;
            margin: 0 auto;
        }
        .content{
            overflow: hidden;
            margin-top: 30px;
        }
        .main{
            padding: 0 18px;
        }
        .info-content{
            border: 1px solid #e1e1e1;
            position: relative;
        }
        .clearfix:before{
            content: " ";
            display: table;
        }
        .clearfix:after{
            clear: both;
            content: " ";
            display: table;
        }
        .info-content .user-profile-nav{
            position: absolute;
            top: 0;
            bottom: 0;
            width: 200px;
            background-color: #f4f3f4;
            text-align: center;
            border-right: 1px solid #e1e1e1;
        }
        .info-content .user-profile-nav h1 {
            margin-top: 40px;
            margin-bottom: 30px;
            font-size: 22px;
            color: #222;
            font-weight: 400;
        }
        h1{
            margin-right: 0px ;
            margin-left: 0px ;
            display: block;

        }
        a{
            text-decoration: none;
        }
        .info-content .user-profile-nav a.active {
            color: #fff;
            background-color: #ed3931;
        }
        .info-content .user-profile-nav a {
            display: block;
            font-weight: 400;
            color: #333;
            height: 40px;
            width: 202px;
            margin-left: -1px;
            line-height: 40px;
            font-size: 18px;
        }
        .info-content .orders-container{
            float: left;
            margin-left: 200px;
            padding-left: 40px;
            width: 922px;
            min-height: 900px;
        }
        .info-content .orders-container .profile-title{
            padding: 26px 0;
            color: #ec443f;
            font-size: 18px;
            border-bottom: 1px solid #e1e1e1;
            margin-bottom: 30px;
        }
        .orders-pager {
            text-align: center;
        }
        .order-box{
            border: 1px solid #e5e5e5;
            margin: 0 40px 30px 0;
        }
        .order-box .order-header {
            background-color: #f7f7f7;
            font-size: 14px;
            padding: 16px 20px;
        }
        .order-box .order-header .order-date {
            color: #333;
            display: inline-block;
            margin-right: 30px;
        }
        .order-box .order-header .order-id {
            color: #999;
        }
        .order-box .order-header .del-order {
            width: 15px;
            height: 16px;
            background: url() no-repeat;
            float: right;
        }
        .order-box .order-body {
            padding: 20px;
            padding-right: 0;
        }
        .order-box .order-body .poster {
            border: 2px solid #fff;
            margin-right: 11px;
            font-size: 0;
        }
        .order-box .order-body>div {
            display: inline-block;
        }
        .order-box .order-body .poster img {
            width: 100%;
            height: 100%;
        }
        img {
            border-style: none;
        }
        .order-box .order-body .order-content {
            width: 49%;
        }
        .order-box .order-body .movie-name {
            font-size: 16px;
            font-weight: 700;
            color: #333;
            margin: 4px 0 7px -6px;
        }
        .order-box .order-body .cinema-name {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
        }
        .order-box .order-body .hall-ticket {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
        }
        .order-box .order-body .hall-ticket span {
            display: inline-block;
            margin-right: 5px;
        }
        .order-box .order-body .show-time {
            font-size: 12px;
            color: #f03d37;
        }
        .order-box .order-body .order-price {
            font-size: 14px;
            color: #333;
            width: 12%;
            line-height: 95px;
        }
        .order-box .order-body .order-status {
            font-size: 14px;
            color: #333;
            width: 12%;
            line-height: 95px;
        }
        .order-box .order-body .actions {
            text-align: center;
        }
        .order-box .order-body .actions {
            font-size: 14px;
            color: #333;
            width: 12%;
            line-height: 95px;
        }
        .order-box .order-body .actions {
            text-align: center;
        }
        .order-box .order-body .actions .pay-btn {
            display: block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #f03d37;
            color: #fff;
            box-shadow: 0 2px 10px -2px #f03d37;
            border-radius: 15px;
            margin-top: 15px;
            margin-left: 10px;
        }
        .order-box .order-body .actions .order-detail {
            color: #333;
        }
    </style>
    <link rel="stylesheet" href="css/headerCss.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>
<myheader></myheader>
<div style="height: 80px"></div>
<div class="container" id="app">
    <div class="content">
        <div class="main">
            <div class="info-content clearfix">
                <div class="user-profile-nav">
                    <h1>个人中心</h1>
                    <a href="./order.html" class="orders active">我的订单</a>
                    <a href="./message.html" class="profile">基本信息</a>
                </div>
                <div class="orders-container">
                    <div class="profile-title">我的订单</div>
                    <div class="order-box" data-orderid="22663552299">
                        <div class="order-header">
                            <span class="order-date">2021-10-13</span>
                        </div>
                        <div class="order-body">
                            <div class="poster">
                                <img src="https://p0.meituan.net/movie/6d05d35d68dcc56bc33dabe8292921772841425.jpg@66w_91h_1e_1c" alt="">
                            </div>
                            <div class="order-content">
                                <div class="movie-name">《大耳朵图图之霸王龙在行动》</div>
                                <div class="cinema-name">百荣国际影城</div>
                                <div class="hall-ticket">
                                    <span>皇家YOYO早教1号厅</span>
                                    <span>4排1座</span>
                                </div>
                                <div class="show-time">明天 10月14日 18:40</div>
                            </div>
                            <div class="order-price">￥49</div>
                            <div class="order-status">待支付</div>
                            <div class="actions">
                                <div>
                                    <a href="" class="pay-btn">付款</a>
                                    <a href="" class="order-detail">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="orders-pager"> </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/header.js"></script>
</body>
</html>